<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Mask test file.</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<script type="text/javascript" src="../src/easeljs/filters/BlurFilter.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/ColorMatrix.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var img, star, stage;
    var scale;
	var angle;
	function init() {
        if (window.top != window) {
            document.getElementById("header").style.display = "none";
        }
        document.getElementById("loader").className = "loader";

		//wait for the image to load
		img = new Image();
		img.onload = handleImageLoad;
		img.src = "assets/photo-hires.jpg";
		angle = 0;
	}

	function handleImageLoad() {
        document.getElementById("loader").className = "";

		//find canvas and load images, wait for last image to load
		var canvas = document.getElementById("testCanvas");

		// create a new stage and point it at our canvas:
		stage = new createjs.Stage(canvas);
		
		// masks can only be shapes.
		star = new createjs.Shape();
		// the mask's position will be relative to the parent of its target:
		star.x = img.width/2;
		star.y = img.height/2;
		// only the drawPolyStar call is needed for the mask to work:
		star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0,0,img.height/2-15,5,0.6).closePath();

		var bg = new createjs.Bitmap(img);
		// blur and desaturate the background image:
		bg.filters = [new createjs.BlurFilter(2,2,2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(0,0,-100,0))];
		bg.cache(0,0,img.width,img.height);
		stage.addChild(bg);
		
		var bmp = new createjs.Bitmap(img);
		stage.addChild(bmp);
		bmp.mask = star;
		
		// note that the shape can be used in the display list as well if you'd like, or
		// we can reuse the Graphics instance in another shape if we'd like to transform it differently.
		stage.addChild(star);

		createjs.Ticker.addEventListener("tick", tick);
	}
	
	function tick(event) {
		star.rotation += 5; 
		star.scaleX = star.scaleY = 1.5+Math.sin(angle)*3;
		stage.update(event);
		angle+=0.025;
	}

	</script>
</head>
	
<body onload="init();">

    <div id="loader"></div>

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Masks</h1>
	    <p>Demonstrates using a vector mask. Note that the mask <strong>Shape</strong> that defines the mask can also be placed on the display list (in this case the star shape is used both a mask, and the yellow border)</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>
